<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加荣誉称号信息</title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
			}

			/* 大盒子 */
			#addtableone {
				width: 90%;
				/* 		box-shadow: 20px; */
				background-color: white;
				margin: 0 auto;
			}

			#header {
				top: 0px;
				background-color: white;
				position: sticky;
				z-index: 5;
			}

			#header #left {
				height: 80px;
				line-height: 80px;
				text-indent: 12px;
			}

			#header #right {
				height: 80px;
				line-height: 80px;
				text-align: right;
			}

			#hr1 {
				color: whitesmoke;
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>
		<div id="addtableone">
			<!-- <el-row>
			  <el-col :span="24"><div class="grid-content bg-purple-dark">
			  <div class="block">
			    <span class="demonstration"> 登记表类型</span>
			    <el-cascader
			      v-model="value"
			      :options="options"
			      @change="handleChange"></el-cascader>
			  </div>
			  </div></el-col>
			</el-row> -->
			<el-row id="header">
				<el-col :span="12">
					<div class="grid-content bg-purple" id="left">
						<h3>荣誉称号</h3>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light" id="right">
						<el-button type="primary" style="color: white;" @click="fanHui()">返回
						</el-button>
					</div>
				</el-col>
			</el-row>
			<hr id="hr1" />
			<el-row>
				<!-- 表单子属性有el-form-item,el-row(多个el-form-item)同级别,可自行删除不需要的-->
				<!-- 短框200px,长框300px,el-form-item width -->
				<!-- 选择框或输入框 label用于显示, value 与 VUE中对应属性绑定 -->
				<!--正则 el-form-item prop="值"  值和rules 中的规则对象绑定-->
				<!--最后的验证函数已经注释可正常提交 ,若想使用查看提交按钮处注释, -->
				<!-- 	刊物级别,和论文类型 使用v-for,其他的是固定的 -->
				<!-- 出版时间和现在时间已经写好可直接使用,onsubmit函数中 -->
				<!--证明材料未设置必须提交,也未绑定table中的值 掌握文件上传后才自行设置-->
				<!--提交后表单信息归零函数未设置,后期自行设置-->
				<el-form :model="form" :rules="rules" ref="form" label-width="80px" class="demo-form" name>
					<el-form-item label="登记类型" style="width: 300px;" prop="region">
						<el-input value="荣誉称号登记表" readonly></el-input>
					</el-form-item>
					<el-form-item label="填报人" style="width: 200px" prop="tianbaoName">
						<el-input v-model="form.tianbaoName"></el-input>
					</el-form-item>
					<el-row>
						<el-col :span="8">
							<el-form-item label="荣誉称号" style="width: 300px;" prop="rongyuChengHao">
								<el-input v-model="form.rongyuChengHao"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="组织单位" style="width: 300px;" prop="zuzhiDanWei">
								<el-input v-model="form.zuzhiDanWei"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="得分" style="width: 200px" prop="deFen">
								<el-input v-model.number="form.deFen"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="获奖时间" style="width: 300px" prop="huojiangsDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.huojiangDate"
									value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
							</el-form-item>
					</el-row>
					<el-form-item label="证明材料" style="width: 100%;">
						<!-- <el-upload action="http://localhost:8080/upload" ref="upload" :on-preview="handlePreview"
							:auto-upload="false">
							<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
							<div slot="tip" class="el-upload__tip">文件大小不超过10Mb</div>
						</el-upload> -->
						<el-upload class="upload-demo" drag action="http://localhost:8080/rongyuchenghao/upload"
							:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
							:on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload" multiple
							:on-exceed="handleExceed" :file-list="fileList">
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip">文件大小不超过10Mb</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="备注" porp="memo">
						<el-input type="textarea" v-model="form.memo"></el-input>
					</el-form-item>
					<!-- 提交栏 -->
					<el-form-item>
						<el-button type="primary" @click="onsubmit()">添加信息</el-button>
						<!-- <el-button type="primary" @click="submitForm('form'),onsubmit()" >添加信息</el-button> -->
						<el-button @click="resetForm('form')">重置</el-button>
					</el-form-item>
				</el-form>
			</el-row>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#addtableone',
				data: {
					form: {
						tianbaoName: '',
						rongyuChengHao: '',
						zuzhiDanWei: '',
						deFen: '',
						huojiangDate: '',
						response: '',
						memo: '',
						fileList:[],
					},
					fileList: [],
					rules: {
						tianbaoName: [{
								required: true,
								message: '请输入填报人',
								trigger: 'blur'
							},
							{
								min: 1,
								max: 20,
								message: '长度在 1 到 20 个字符',
								trigger: 'blur'
							}
						],
						rongyuChengHao: [{
							required: true,
							message: '请输入荣誉称号',
							trigger: 'blur'
						}],
						zuzhiDanWei: [{
							required: true,
							message: '请输入组织单位',
							trigger: 'blur'
						}],
						deFen: [{
								required: false,
								message: '请输入得分',
								trigger: 'blur'
							},
							{
								type: 'number',
								message: '得分必须为数字',
								trigger: 'blur'
							}
						],
						huojiangDate: [{
							type: 'string',
							required: true,
							message: '请选择日期',
							trigger: 'change'
						}]
					},
				},
				//生命周期函数
				created: function() {

				},
				methods: {
					// 绑定提交信息按钮
					// onsubmit() {
					// 	//用于获取提交时的时间:yyyy-MM-dd HH:mm:ss
					// 	let currentdate = this.getCurrentTime()
					// 	console.log(currentdate)
					// 	// 出版时间在el-date-picker 中value-format="yyyy-MM-dd"
					// 	console.log(this.form.chubandate)
					// 	//用与提交的数据
					// 	console.log(this.form)
					// 	//证明材料数据可用
					// 	this.submitUpload()
					// 	console.log(this.from.fileList)
					// },
					//证明材料函数与证明材料的钩子函数绑定
					resetForm(form) {
						this.$refs[form].resetFields();
					},
					submitUpload() {
						this.$refs.upload.submit();
					},
					beforeadd(file) {
						this.form.fileList.push(file)
					},
					submitUpload() {
						this.$refs.upload.submit();
					},
					handleRemove(file, filelist) {
						console.log("handleRemove")
					},
					handlePreview(file) {
						console.log("handlePreview")
						console.log(file)
						window.open(file.response.data.url)
					},
					handleExceed(files, fileList) {
						console.log("handleExceed")
						this.$message.warning(
							`本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
					},
					beforeUpload(file) {
						this.loading = true
						console.log("beforeUpload")
						console.log(file)
					},
					beforeRemove(file, fileList) {
						console.log("beforeRemove")
						//删除提交的表单表中要移除的文件
						let index = '';
						for (const i in fileList) {
							if (fileList[i] == file) {
								index = file.name;
								break;
							}
						}
						for (const i in this.fileMapprings) {
							if (this.fileMapprings[i].oldfilename == index) {
								index = this.fileMapprings[i].newfilename
								break;
							}
						}
						for (const i in this.form.fileList) {
							if (this.form.fileList[i] == index) {
								this.form.fileList.splice(i, 1)
								break;
							}
						}
					},
					uploadSuccess(response, file, fileList) {
						//this.fileList = fileList
						console.log("文件上传成功")
						console.log(fileList)
						console.log(response)
						if (response.code == 10010) {
							// this.form.fileList.push(response.data.newfilename)
							// this.lastuploadfile = response.data.newfilename
							let m = {
								oldfilename: '',
								newfilename: ''
							}
							m.newfilename = response.data.newfilename
							m.oldfilename = response.data.oldfilename
							this.form.fileList.push(m)
							console.log(this.form.fileList)
							
							this.$message.success(file.name + "文件上传成功")
						} else {
							this.$message.error(response.data + "：上传失败，请重新上传");
							// //删除上传列表中，失败的文件
							// let index = 0;
							// for (const i in fileList) {
							// 	if (fileList[i] == file) {
							// 		index = i;
							// 		break;
							// 	}
							// }
							// //移出当前文件对象
							// fileList.splice(index, 1);
							this.$refs.uploadFile.clearFiles();
						}
						// console.log(response.code)
						// console.log(response)
						// console.log(fileList)
						// this.loading = false
					},
					uploadError(err, file, fileList) {
						this.fileList = fileList
						console.log(err)
						console.log(file)
						console.log(fileList)
						console.log("文件上传失败")
						this.$message.error(file.name + "上传失败，请重新上传");
						// //删除上传列表中，失败的文件
						// let index = 0;
						// for (const i in fileList) {
						// 	if (fileList[i] == file) {
						// 		index = i;
						// 		break;
						// 	}
						// }
						// //移出当前文件对象
						// fileList.splice(index, 1);
						// this.$refs.uploadFile.clearFiles();
						// this.loading = false
					},
					onsubmit() {
						axios.post('http://localhost:8080/rongyuchenghao/save', this.form).then((res) => {
							console.log(res)
							// this.captcha.img = res.data.img
							// this.captcha.token = res.data.token
						})
					},
					fanHui() {
						window.location = "list.html"
					},
					// //检验是否提交函数,可在添加信息中取消该函数
					// open() {
					// 	this.$confirm('是否提交?', '提示', {
					// 		confirmButtonText: '确定',
					// 		cancelButtonText: '取消',
					// 		type: 'warning'
					// 	}).then(() => {
					// 		this.$message({
					// 			type: 'success',
					// 			message: '提交成功!'
					// 		});
					// 	}).catch(() => {
					// 		this.$message({
					// 			type: 'info',
					// 			message: '已取消提交'
					// 		});
					// 	});
					// },
					// //检验函数 若不符合则无法提交
					// submitForm(formName) {
					// 	this.$refs[formName].validate((valid) => {
					// 		if (valid) {
					// 			alert('submit!');
					// 		} else {
					// 			console.log('error submit!!');
					// 			return false;
					// 		}
					// 	});
					// },
					// resetForm(formName) {
					// 	this.$refs[formName].resetFields();
					// },
					// 日期函数格式为:yyyy-MM-dd HH:mm:ss	:2022-10-2 20:32:19
					getCurrentTime() {
						let currentTime = new Date(),
							year = currentTime.getFullYear(),
							month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime
							.getMonth() + 1,
							day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
						hour = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
						minutes = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime
							.getMinutes();
						second = currentTime.getSeconds() < 10 ? '0' + currentTime.getMinutes() : currentTime
							.getSeconds();
						currentTime = year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + second
						return currentTime
					},
				},
			})
		</script>
	</body>
</html>
